<!DOCTYPE html>
<html lang="en" class="page-fill" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>单号规则列表</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--	 @{}	静态资源目录下的文件-->
	<link rel="stylesheet" th:href="@{/css/oksub.css}">
	<link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}">
  <link rel="stylesheet" th:href="@{/layui_ext/dtree/dtree.css}">
  <link rel="stylesheet" th:href="@{/layui_ext/dtree/font/dtreefont.css}">
	<script type="text/javascript" th:src="@{/lib/loading/okLoading.js}"></script>
</head>
<body class="ok-body-scroll">
<div class="ok-body">
	<table class="layui-hide" id="tableId" lay-filter="waybillRulesTable"></table>
</div>
<!--js逻辑-->
<script th:src="@{/lib/layui/layui.js}"></script>
<!--th:inline="none" 关闭Thymeleaf功能，防止冲突-->
<script th:inline="none">
layui.use(["element", "table", "laydate", "okUtils", "okMock","okLayer", "form"], function () {
		var table = layui.table;
		var okUtils = layui.okUtils;
		var okLayer = layui.okLayer;
		var form = layui.form;
		var $ = layui.jquery;

		var tableData;

		okLoading.close();

			var	waybillRulesTable = table.render({
				elem: '#tableId',
				/* url: okMock.api.permission.list, */
				url:"/api/waybillRules/list",
				limit: 20,
				page: true,
				cellMinWidth: 80,
				toolbar: true,
				toolbar: "#toolbarTpl",
				cols: [[{
					title: "全选",
					width: 50,
					type: "checkbox",
					fixed: 'left'},
					{field: "id", title: "规则编号", width: 110, sort: true, fixed: "left"},
					{field: "ruleName", title: "规则名称", width: 150},
					{field: "beginChar", title: "开始字符", width: 100},
					{field: "length", title: "长度", width: 100},
					{field: "maxWayBillId", title: "当前最大单号", width: 200},
					{field: "typeName", title: "规则类型名称", width: 120, align: "center", templet: "#typeTpl"},
					{field: "usageStatus", title: "使用情况", width: 120, align: "center", templet: "#statusTpl"},
					{field: "createTime", title: "添加时间", width: 200},
					{field: "remarks", title: "备注", width: 200},
					{title: "操作", width: 100, templet: "#operationTpl", align: "center", fixed: "right"}
				]],
				done: function (res, curr, count) {
					//获得当前页面表格的所有数据
					tableData = table.cache['tableId'];
					//禁止正在使用的规则的checkbox
					for (var i in res.data) {
						var item = res.data[i];
						if (item.usageStatus == 1) {// 这里是判断需要禁用的条件（如：状态为0的）
							//移除复选框
							 $('tr[data-index=' + i + '] input[type="checkbox"]').remove();
							//移除复选框样式
							 $('tr[data-index=' + i + '] i[class="layui-icon layui-icon-ok"]').remove();

							//直接将复选框外的div删除（该方法会导致错位，不要使用）
							// $('tr[data-index=' + i + '] div[class="layui-table-cell laytable-cell-1-0-0 laytable-cell-checkbox"]').remove();

							form.render();// 重新渲染一下

							//禁用全选复选框
							// this.elem.next('.layui-table-view').find('.layui-table-box .layui-table-header :checkbox[name="layTableCheckbox"]').prop('disabled',true);

							//移除全选复选框 该代码必须写在from渲染的后面
							this.elem.next('.layui-table-view').find('.layui-table-box .layui-table-header :checkbox[name="layTableCheckbox"]').next('.layui-form-checkbox').remove();

						}
					}
				/* console.info(res, curr, count);   */
				}
			});

	form.on("submit(search)", function (data) {

		//实现前端直接查询，不走后台
		console.log(data)
		// var typeId = parseInt(data.field.typeNameSelect);
		// console.log(typeId)

		var tableDataTest;
		//对表格数据进行处理，filter方法是对一个数组进行处理生成新的数组
		if(data.field.typeNameSelect == "" && data.field.useStatusSelect == ""){
			tableDataTest = tableData;
		}else {
			 tableDataTest = tableData.filter(function(tableData, index){
				if(data.field.typeNameSelect == "" ){
					return tableData.usageStatus === data.field.useStatusSelect;
				}else if(data.field.useStatusSelect == "" ){
					return tableData.typeId === parseInt(data.field.typeNameSelect);
				}else {
					return tableData.typeId === parseInt(data.field.typeNameSelect) && tableData.usageStatus === data.field.useStatusSelect;
				}
			})
		}

		console.log(tableData)
		console.log(tableDataTest)

		//对表格进行重载，注意要把url置为空，否则表格还是会从后台取值，不会使用data直接赋值
		waybillRulesTable.reload({
			url:"",
			data:tableDataTest,
			page: {curr: 1},
			done: function (res, curr, count) {
				for (var i in res.data) {
					var item = res.data[i];
					if (item.usageStatus == 1) {// 这里是判断需要禁用的条件（如：状态为0的）
						$('tr[data-index=' + i + '] input[type="checkbox"]').remove();
						$('tr[data-index=' + i + '] i[class="layui-icon layui-icon-ok"]').remove();
						form.render();
						this.elem.next('.layui-table-view').find('.layui-table-box .layui-table-header :checkbox[name="layTableCheckbox"]').next('.layui-form-checkbox').remove();
					}
				}
			}
		});

		//没有该语句页面会重新刷新，就无法进行查询了
		return false;
	});

	table.on("toolbar(waybillRulesTable)", function (obj) {
		switch (obj.event) {
			case "batchDel":
				batchDel();
				break;
			case "add":
				add();
				break;
		}
	});

	table.on("tool(waybillRulesTable)", function (obj) {
		var data = obj.data;
		switch (obj.event) {
			case "edit":
				edit(data);
				break;
			case "del":
				del(data.id);
				break;
		}
	});

	//监听是否停用操作
	form.on('switch(usageStatus)', function(obj){

		//取开关的值（跟传入开关的值相同，但名称不同）
		var state = obj.elem.checked?0:1;

		//取表格一行数据 （根据索引table.cache里面的行数据）
		var index  = obj.othis.parents('tr').attr("data-index");
		var id = tableData[index].id;
		var typeId = tableData[index].typeId;
		console.log(id+","+state)

		//如果点击正在使用的，不会成功，点击不使用的，正在使用的变为不使用
		if(state == 1){
			okLayer.greenTickMsg("每个类型的规则至少有一个", function () {});
		}else {
			//将id,state传回后台，注意state是切换按钮之前的值，后台需要更改
			okUtils.ajax("/api/waybillRules/changeUseStatus", "post",{"id":id,"typeId":typeId}, true).done(function (response) {
				console.log(response);
				okLayer.greenTickMsg("操作成功", function () {
					waybillRulesTable.reload({
						page: {curr: 1},
						done: function (res, curr, count) {
							//禁止正在使用的规则的checkbox
							for (var i in res.data) {
								var item = res.data[i];
								if (item.usageStatus == 1) {// 这里是判断需要禁用的条件（如：状态为0的）
									$('tr[data-index=' + i + '] input[type="checkbox"]').remove();
									$('tr[data-index=' + i + '] i[class="layui-icon layui-icon-ok"]').remove();
									form.render();
									//当数据中有正在使用的规则时，把全选按钮删除（运行中规则最多有四个，并没有过多影响性能）
									this.elem.next('.layui-table-view').find('.layui-table-box .layui-table-header :checkbox[name="layTableCheckbox"]').next('.layui-form-checkbox').remove();
								}
							}
							/* console.info(res, curr, count);   */
						}
					});
				});
			}).fail(function (error) {
				console.log(error);
			});
		}

	});

	function batchDel() {
		okLayer.confirm("确定要批量删除(当表中的规则全为已停用才可全选)？", function (index) {

			layer.close(index);
			var idsStr = okUtils.tableBatchCheck(table);
			console.log(idsStr);
			if (idsStr) {
				okUtils.ajax("/api/waybillRules/delete", "post", {idsStr: idsStr}, true).done(function (response) {
					console.log(response);
					okUtils.tableSuccessMsg(response.msg);
					waybillRulesTable.reload();
				}).fail(function (error) {
					console.log(error)
				});
			}
		});
	}

	function add() {
		okLayer.open("添加规则", "waybillRules/add", "90%", "90%", null, function () {
			waybillRulesTable.reload();
		})
	}

	function edit(data) {
		okLayer.open("更新规则", "waybillRules/edit", "90%", "90%", function (layero) {
			var iframeWin = window[layero.find("iframe")[0]["name"]];
			iframeWin.initForm(data);
		}, function () {
			waybillRulesTable.reload();
		})
	}

	function del(id) {
		okLayer.confirm("确定要删除吗？", function () {
			okUtils.ajax("/api/waybillRules/delete", "post", {idsStr: id}, true).done(function (response) {
				console.log(response);
				okUtils.tableSuccessMsg(response.msg);
			}).fail(function (error) {
				console.log(error)
			});
		})
	}

	});

</script>

<!-- 规则类型模板-->
<script type="text/html" id="typeTpl">
	{{#  if(d.typeName == "单号规则"){ }}
	<span class="layui-btn layui-btn-normal layui-btn-xs">单号规则</span>
	{{#  } else if(d.typeName == "袋号规则") { }}
	<span class="layui-btn layui-btn layui-btn-xs">袋号规则</span>
	{{#  } else if(d.typeName == "车次规则") { }}
	<span class="layui-btn layui-btn-warm layui-btn-xs">车次规则</span>
	{{#  } else if(d.typeName == "运单限制规则") { }}
	<span class="layui-btn layui-btn-danger layui-btn-xs">运单限制规则</span>
	{{#  } }}
</script>

<!-- 使用状态模板-->
<script type="text/html" id="statusTpl">
	<input type="checkbox" name="usageStatus" value="{{d.usageStatus}}" lay-skin="switch" lay-text="使用中|已停用" lay-filter="usageStatus" {{ d.usageStatus == 1 ? 'checked' : '' }}>
</script>

<!-- 头工具栏模板 -->
<script type="text/html" id="toolbarTpl">

	<!--	必须设置样式为行级样式	-->
	<div class="layui-input-inline">
		<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchDel">批量删除</button>
		<button class="layui-btn layui-btn-sm" lay-event="add">添加规则</button>
	</div>
	<!--模糊搜索区域-->

	<!--	必须设置样式为行级样式	-->
	<div class="layui-input-inline">

	<!--	form表单里面的class必须写全，不然样式会错位	-->
	<form class="layui-form layui-col-md12 ok-search-form">

			<div class="layui-input-inline">
			<label class="layui-form-label" style="width: 90px">规则类型</label>

		<!-- 该inline样式必须写，否则会出现不左右，而是上下排列的问题 -->
			<div class="layui-input-inline">
			<select lay-search id="typeNameSelect" name="typeNameSelect">
				<option value="">请选择规则类型</option>
				<option value="44">单号规则</option>
				<option value="45">袋号规则</option>
				<option value="46">车次规则</option>
				<option value="47">运单限制规则</option>
			</select>
			</div>
			</div>

			<div class="layui-input-inline">
			<label class="layui-form-label" style="width: 90px">启用状态</label>

			<div class="layui-input-inline">
			<!-- 注意事件监听是按照name属性进行监听的，如果没有添加name属性，是无法进行监听的 -->
			<select lay-search id="useStatusSelect" name="useStatusSelect">
				<option value="">请选择规则启用状态</option>
				<option value="1">使用中</option>
				<option value="0">已停用</option>
			</select>

			</div>
			</div>

		<button class="layui-btn" lay-submit="" lay-filter="search">
			<i class="layui-icon">&#xe615;</i>
		</button>

	</form>
	</div>
</script>
<!--行工具栏模板-->
<!--如果规则正在使用不允许删除，只有不在使用的才可以删除-->
<script type="text/html" id="operationTpl">

	{{#  if(d.usageStatus == 0){ }}
	<a href="javascript:" title="编辑" lay-event="edit"><i class="layui-icon">&#xe642;</i></a>
	<a href="javascript:" title="删除" lay-event="del"><i class="layui-icon">&#xe640;</i></a>
	{{#  } else if(d.usageStatus == 1) { }}
	<a href="javascript:" title="编辑" lay-event="edit"><i class="layui-icon">&#xe642;</i></a>
	{{#  } }}
</script>
</body>
</html>
